

<template>
    <el-form :model="suggest">

        <el-form-item>
            <el-input v-model="suggest.body" :rows="8" type="textarea" placeholder="非常感谢你的宝贵意见！" />
        </el-form-item>
        <el-form-item>
            <el-text>方便留下你的联系方式<el-text type="info">（不会公开）</el-text>吗？</el-text>
        </el-form-item>
        <el-form-item>
            <el-input v-model="suggest.wechat" type="text" placeholder="微信" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="suggest.qq" type="text" placeholder="QQ" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="suggest.phone" type="text" placeholder="电话号码+称呼" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="suggest.other" type="text" placeholder="其他，比如：WhatsApp……" />
        </el-form-item>

        <el-form-item>
        <el-button type="primary">提交</el-button>

      </el-form-item>

    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const suggest = reactive({
    body: '',
    wechat: '',
    qq: '',
    phone: '',
    other: '',
})

</script>